<template>
  <div id="china-chart"></div>
</template>

<script>
import {listChinaAll} from "@/api/res";
import {mapMutations} from "vuex";

let echarts = require('echarts')
require('echarts/theme/macarons'); // echarts 主题

export default {
  name: "chinaChart",
  methods: {
    ...mapMutations(['setChinaLoading']),
    initChart(res) {
      let colors = ['#ee6666', '#a2db7b', '#aecfff', '#9f0000', '#eeb526'];
      let confirm = [];
      let storeConfirm = [];
      let heal = [];
      let dead = [];
      let input = [];
      let date = []
      for (let datum of res.data) {
        confirm.push(datum.confirm)
        storeConfirm.push(datum.storeConfirm)
        heal.push(datum.heal)
        dead.push(datum.dead)
        input.push(datum.input)
        date.push(datum.updateDate)
      }

      // 获取当前时间
      let myChart = new echarts.init(document.getElementById('china-chart'), 'macarons');

      let option = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度

        },
        title: {
          text: "全国信息",
          subtext: '数据来自网络',
          left: '2%',
          top: '2%',
          textStyle: {
            fontWeight: 1000,
            fontSize: 18,
            color: 'rgba(0,0,0,0.8)'
          }
        },
        legend: {
          data: ['总确诊', '现有确诊', '治愈数', '死亡数', '境外输入'],
          top: 10,
          bottom: 10
        },
        grid: {
          top: 70,
          bottom: 50,
          containLabel: true
        },
        dataZoom: {
          start: 50,
          end: 100,
        },
        xAxis: {
          type: 'category',
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#111111'
            }
          },
          data: date
        },
        yAxis: {
          type: 'value',
          name: '人数',
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#111111'
            }
          },
        },
        series: [
          {
            name: '总确诊',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series',
            },
            data: confirm
          },
          {
            name: '现有确诊',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: storeConfirm
          },
          {
            name: '治愈数',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: heal
          },
          {
            name: '死亡数',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: dead
          },
          {
            name: '境外输入',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: input
          }
        ]
      };

      myChart.setOption(option);
    }
  },
  mounted() {
    listChinaAll().then(res => {
      this.initChart(res)
      this.setChinaLoading(false);
    })

  }
}
</script>

<style scoped>
#china-chart {
  width: 780px;
  height: 470px;
  background-color: var(--background-color);
  margin: 10px 0 0 0;
  border-radius: var(--border-radius);
}
</style>